<template>
    <div class="pageContainer">
        <div id="rightPdfContainer">
            <div id="viewer2" class="pdfViewer"></div>
            <div class="widget" :style="'left:'+rectData.left+'px;'+'top:'+rectData.top+'px;'+'width:'+rectData.width+'px;'+'height:'+rectData.height+'px;'">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" :width="rectData.width+'px'" :height="rectData.height+'px'">
                    <rect
                        :width="rectData.width"
                        :height="rectData.height"
                        style="fill: rgba(144,144,227,0.2); stroke-width: 1; stroke: rgba(144,144,227,0.3)"
                    />
                </svg>
            </div>
        </div>
    </div>
</template>

<script>
// 引入pdf-js
// import * as pdfjsLib from "pdfjs-dist/build/pdf";
// // 引入样式
// import "pdfjs-dist/web/pdf_viewer.css";
// // globalworker 设置，是用于设置 PDF.js 库在 Web 应用程序中使用的 Web Worker 路径的属性  用 CDN 的资源；如果你本地的也可以那就可以配置成本地的 "pdfjs-dist/build/pdf.worker.min.js"
// pdfjsLib.GlobalWorkerOptions.workerSrc =
//     "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";
// // pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.min.js";
// // 引入 eventbus 和 pdfviewer，后面需要配置
// import { PDFViewer, EventBus } from "pdfjs-dist/web/pdf_viewer";
export default {
    name: "PdfViewer",
    props:{
        rectData:Object
    },
    mounted() {
        this.getPdf();
    },
    methods: {
        async getPdf() {
            let eventBus = new EventBus();
            let container = document.getElementById("rightPdfContainer");
            //   console.log(container)
            let pdfViewer = new PDFViewer({
                container: container,
                eventBus: eventBus,
            });
            let loadingTask = pdfjsLib.getDocument("../oldFile5/5页电子围栏系统方案(标准).pdf");
            let pdf = await loadingTask.promise
                .then((pdfRes)=>{
                    //     // 获取第一页
                    // console.log(pdfRes)
                    // console.log(pdfRes.getPage)
                    // console.log(pdfRes.numPages)
                    for(var i = 0;i<pdfRes.numPages;i++){
                        pdfRes.getPage(i+1).then(function(page) {
                            //获取当前容器的scale，然后赋值后获取当前容易的宽高，赋值给canvas
                            var desiredWidth = document.getElementById("rightPdfContainer").offsetWidth;
                            // console.log(desiredWidth)
                            var viewport = page.getViewport({ scale: 1, });
                            var scale = desiredWidth / viewport.width;
                            var scaledViewport = page.getViewport({ scale: scale, });
                            // console.log(scaledViewport)
                            //返回当前显示设备的物理像素分辨率与CSS像素分辨率的比率
                            var outputScale = window.devicePixelRatio || 1;
                            // 创建一个canvas元素用于显示PDF内容
                            var canvas = document.createElement('canvas');
                            var context = canvas.getContext('2d');
                            // 设置canvas的大小为PDF页面的大小
                            canvas.width = Math.floor(scaledViewport.width*outputScale );
                            canvas.height = Math.floor(scaledViewport.height*outputScale );
                            canvas.style.width = Math.floor(scaledViewport.width) + "px";
                            canvas.style.height =  Math.floor(scaledViewport.height) + "px";
                            // console.log(canvas)
                            var transform = outputScale !== 1
                                ? [outputScale, 0, 0, outputScale, 0, 0]
                                : null;

                            var renderContext = {
                                canvasContext: context,
                                transform: transform,
                                viewport: scaledViewport
                            };
                            // 将PDF页面渲染到canvas上
                            page.render(renderContext);
                            // 将canvas添加到容器中显示
                            container.appendChild(canvas);
                        });

                    }

                });
            pdfViewer.setDocument(pdf);
        },
        //计算画布的宽高
        countCanvasWH(){

        },
        //使标注滚动到窗口中间
        scrollToCenter(top){

        },
    },
};
</script>

<style lang="scss" scoped>
.pageContainer {
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
    #rightPdfContainer{
        width: 100%;
        position: absolute;
        height: 100%;
        .pdfViewer{
            width: 100%;
            height: 100%;
            display: none;
            .page{
                width: 100%;
                height: 100%;
            }
        }
        .widget{
            position: absolute;
        }
        .widget>svg {
            overflow: visible;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}
</style>

